iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0

菜菜菜的 Vue 30天 - Day25

在前面我們有介紹了 props 以及 $emit 來做子父層組件間的傳值,這時我們再來拿前面章節有使用到的這張圖來說:

如果我們想要從第三層最左邊的 component 傳值到第三層最右邊的那個 component 想一下該怎麼做呢?!

如果利用 props 及 $emit 來執行的話,我們必須先使用 $emit 往上傳 2 層到最父層的 component 在使用 props 傳 2 次傳到我們的目標 component。

這還只是傳一個資料就這麼麻煩了,如果專案結構越來越大,需要跨組件傳值的資料越來越多,這樣子我們的資料流就很難維護。

這時候我們就需要一些工具來協助我們管理資料流。

Vuex

2014 年 F8 開發者大會,FB 提出了 Flux 單向資料流的概念,更明確的定義了單向資料流中各角色職責及互動方式,提高了可維護性。

![](https://cdn-images-1.medium.com/max/1200/1*70lLOYbfnZ9iTP1iMPxjLw.png =600x)

Vuex 就是建立在 Flux 的單向資料流的架構上,並依照 Vue 的特性開發出的單向資料流的工具。

而 Vuex 的資料流架構如下:

透過 Vuex 我們就能框架組建間的資料統一管理。

下一章會開始詳細介紹 Vuex 的詳細用法~


上一篇
vue-router(常用用法)
下一篇
Vuex(安裝、引入、state 及 getters)
系列文
菜菜菜的 Vue 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Amigo
iT邦新手 5 級 ‧ 2019-09-30 15:26:54

很多組件時跨組件傳值是很麻煩,如果是這個問題,不是將data宣告在new Vue(),然後各組件像 this.$root.myGlobalKey 這樣用就可以了?

我要留言

立即登入留言